<template>
	<div style="height: 100%;">
		<div id="a1" v-show="liveImgShow"></div>
		<div v-if="!liveImgShow" style="position:relative;height: 100%;">
			<img class="liveImg" :src="liveInfo.roomPoster=(liveInfo.roomPoster!='')?liveInfo.roomPoster:defaultCover" @click="imgClick">
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				defaultCover: require("../../../static/img/miguDefault.png"),
				timeRunShow: false, //倒计时开关
				hours: "",
				minutes: "",
				seconds: "",
				days: "",
				title: "",
				time: "",
				tickTimer: "",
				timeObj: "", //倒计时赋值对象
			};
		},
		computed: {
			liveImgShow() {
				return this.$store.state.liveImgShow; //视频图片显示互换
			},
			liveInfo() {
				return this.$store.state.liveInfo;
			},
		},
		mounted() {
			// 暂时关闭
			// this.tickTimer = setInterval(() => {
			//   //刷新1分钟一次。
			//   if (this.$store.state.playTime) {
			//     this.getUserCollect(3);//聊天
			//   } else {
			//     clearInterval(this.tickTimer);
			//   }
			// }, 60000);
		},
		methods: {
			imgClick() {
				this.$toast({
					message: "当前频道不在直播中，请稍后再来",
					duration: 1500,
				});
			},
			// 视频状态
			testStatus(info) {
				if (info.status == 1) {
					//直播
					this.showPlayer(this.statusComm(info), true, false, info.roomPoster);
				} else if (info.status == 2) {
					//暂停
					this.videoplaySwitch(info, this.comm(info));
				} else if (info.status == 3) {
					//结束
					this.videoplaySwitch(info, this.comm(info));
				} else {
					this.videoplaySwitch(info, this.comm(info));
				}
			},
			//回放
			videoplaySwitch(info, src) {
				if (info.videoplaySwitch > 0) { //开启回放
					this.$store.state.liveImgShow = true;
					this.showPlayer(src, false, true, info.roomPoster);
				} else {
					this.$store.state.liveImgShow = false;
				}
			},
			// 回放地址
			comm(info) {
				let list = [];
				if(info.videoplayUrl!=null){
					let url = info.videoplayUrl;
					let vType = url.substring(url.lastIndexOf(".") + 1);
					let type = "video/" + vType;
					let list0 = [info.videoplayUrl, type, "原画", 10];
					list.push(list0);
				}
				return list;
			},
			// 直播地址
			statusComm(info) {
				var isPc = /macintosh|window/.test(navigator.userAgent.toLowerCase());
				let list = [];
				let listText = [];
				this.$store.state.liveImgShow = true;
				if (info.liveType == 1) {
					//推流
					if (isPc) {
						listText = [info.liveFlv4, "video/flv", "超清", 0];
					} else {
						listText = [info.liveHls4, "video/m3u8", "超清", 0];
					}
					list.push(listText);
				} else if (info.liveType == 2) {
					//拉流
					if (isPc) {
						listText = [info.pullUrlHls4, "video/flv", "超清", 0];
					} else {
						listText = [info.pullUrlHls4, "video/m3u8", "超清", 0];
					}
					list.push(listText);
				}
				return list;
			},
			// 播放器
			showPlayer(src, lv, loop, cover) {
				let videoObject = {
					container: "#a1", //“#”代表容器的ID，“.”或“”代表容器的class
					variable: "player", //该属性必需设置，值等于下面的new chplayer()的对象
					flashplayer: false, //如果强制使用flashplayer则设置成true
					video: src, //视频地址
					live: lv, // 	false=点播/直播回看，true=直播视频
					loop: loop, //false=播放结束后暂停，true=播放结束后重新播放
					poster: cover, // 定义播放器默认暂停时显示的一张图片地址。
					autoplay: true, //  是否
					// loaded: this.loadedHandler()
				};
				this.player = new ckplayer(videoObject);
			},
			loadedHandler() {
				setTimeout(() => {
					this.player.addListener("play", this.playHandler);
					this.player.addListener("pause", this.pauseHandler);
				}, 1000);
			},
			playHandler() {
				this.$set(this.$store.state, "playTime", true);
			},
			pauseHandler() {
				// 清除心跳 用户统计
				this.$set(this.$store.state, "playTime", false);
				clearInterval(this.tickTimer);
			},
			// 用户统计
			getUserCollect(type,info) {
				let source = this.version();
				let ip = returnCitySN["cip"];
				this.$http.post(this.$api.collectUserInfo(), {
					"companyId": info.live_room_info.companyId,
					roomId:info.live_room_info.id,
					openid:info.openId,
					name:info.name,
					ip:ip,
					source:source,
					type:type,
					"phone": '',
				}).then(res => {
					if (res.data.code == 0) {}
				});
			},
			//获取终端类型
			version() {
				var u = window.navigator.userAgent;
				if (u.indexOf("Android") > -1) {
					var type = "Android";
				} else if (u.indexOf("iPhone") > -1) {
					var type = "iPhone";
				} else if (u.indexOf("iPad") > -1) {
					var type = "iPhone";
				} else if (u.indexOf("Windows") > -1) {
					var type = "PC";
				} else if (u.indexOf("Mac") > -1) {
					var type = "PC";
				}
				return type;
			}
		}
	};
</script>
<style scoped="scoped">
	#encodeLogo {
		position: absolute;
		height: auto;
		top: 0;
		left: 0;
	}

	.el-header {
		height: 30px !important;
		text-align: left;
	}

	.el-header img,
	#a1 {
		height: 100%;
	}

	.countDownForRoom {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		color: #fff;
		background: rgba(0, 0, 0, 0.8);
		z-index: 20000;
	}

	.liveImg {
		width: 100%;
		height: 100%;
		vertical-align: top;
	}

	.countDownTitle {
		margin: 20px 0;
		padding: 6px 0;
		text-align: center;
	}

	.countDownTitle span {
		padding: 6px;
		border-radius: 5px;
		background: #1ca9e3;
		color: #fff;
	}

	.timeRun {
		display: flex;
		justify-content: space-around;
		margin: 0 40px;
		padding: 18px;
		border-radius: 5px;
		background: #1b1b1b;
	}

	.timeBox {
		width: 60px;
		height: 70px;
		line-height: 70px;
		text-align: center;
		background: #323232;
		margin: 0 3px;
		font-size: 33px;
		border-radius: 3px;
		border: 2px solid #2d2d2d;
	}

	.timeDot {
		align-self: center;
		font-size: 24px;
		font-weight: bolder;
	}
</style>
